<template>
	<view class="page">
		<uv-navbar :title=title @leftClick="leftClick" class="navbar"></uv-navbar>
		<view class="content">
			<view class="component cp-punch-in-punchin flex--column">
				<view class="punch-in-log shadow-box flex">
					<view class="section sec-left flex">
						<image class="mark-time" src="/static/staff_index/attendance/mark-forenoon.png"
							mode="widthFix" />
						<view class="desc flex--column">
							<text class="top">上班</text>
							<text class="middle">({{workday}})</text>
							<view>
								<text v-if="isWorkTime === 0" class="not-punched">未打卡</text>
								<text v-if="isWorkTime === 1" class="punched">已打卡</text>
							</view>
						</view>
					</view>
					<view class="divider"></view>
					<view class="section sec-right flex">
						<image class="mark-time" src="/static/staff_index/attendance/mark-afternoon.png"
							mode="widthFix" />
						<view class="desc flex--column">
							<text class="top">下班</text>
							<text class="middle">({{closingday}})</text>
							<view>
								<text v-if="isClosingTime === 0" class="not-punched">未打卡</text>
								<text v-if="isClosingTime === 1" class="punched">已打卡</text>
							</view>
						</view>
					</view>
				</view>
				<view class="punch-in shadow-box flex--column">
					<view class="as-button btn-punch-in" @click="checkTime">
						<view class="btn-title">打卡</view>
						<view class="btn-time">{{time}}</view>
					</view>
					<text class="tips">打卡将会自动记录您的位置哦</text>
				</view>
			</view>
			<uv-tabbar :value="value" @change="index=>value = index">
				<uv-tabbar-item @click="click('/pages/staff/attendance/attendance')" text="考勤">
					<template v-slot:inactive-icon>
						<image class="icon" src="/static/staff_index/attendance/punchin--active.png"></image>
					</template>
					<template v-slot:active-icon>
						<image class="icon" src="/static/staff_index/attendance/punchin.png"></image>
					</template>
				</uv-tabbar-item>
				<uv-tabbar-item @click="click('/pages/staff/attendance/attendance-application/attendance-application')"
					text="申请">
					<template v-slot:inactive-icon>
						<image class="icon" src="/static/staff_index/attendance/application--active.png"></image>
					</template>
					<template v-slot:active-icon>
						<image class="icon" src="/static/staff_index/attendance/application.png"></image>
					</template>
				</uv-tabbar-item>
				<uv-tabbar-item @click="click('/pages/staff/attendance/attendance-statistics/attendance-statistics')"
					text="统计">
					<template v-slot:inactive-icon>
						<image class="icon" src="/static/staff_index/attendance/statistics--active.png"></image>
					</template>
					<template v-slot:active-icon>
						<image class="icon" src="/static/staff_index/attendance/statistics.png"></image>
					</template>
				</uv-tabbar-item>
			</uv-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		getCurrentDateInfo,
		getRealTime
	} from '@/request/wx.js'
	import {
		addpunch,
		querypunch
	} from '@/request/ap_staff.js'
	export default {
		data() {
			return {
				closingday: "16:45 - 20:15", //下班打卡时间
				workday: '7:45 - 11:15', //上班打卡时间
				time: "", //实时时间
				title: "", //顶部时间
				isInWorkTime: false, // 是否在上班时间段
				isInClosingTime: false, // 是否在下班时间段
				isWorkTime: 0, //是否上班打卡
				isClosingTime: 0, //是否下班打卡
				value: 0,
				latitude: '',
				longitude: '',
				fileList: [],
				attendanceTime: [{
					'name': 0
				}],
				now: new Date().toLocaleTimeString('chinese', {
					hour12: false
				}),
				timer: null
			};
		},
		onShow() {
			//顶部时间
			let date = getCurrentDateInfo();
			this.title = `${date.year}年${date.month}月${date.day}日` + "考勤"
			//实时更新时间
			this.timer = setInterval(() => {
				this.time = getRealTime(); // 定期更新时间
			}, 1000); // 每1000毫秒（1秒）更新一次时间
			//查询用户今日是否签到
			this.showpunch()
		},
		methods: {
			leftClick() {
				uni.navigateBack({
					data: 1
				})
			},
			click(e) {
				uni.navigateTo({
					url: e
				});
			},
			// ...其他方法
			checkTime() {
				const now = new Date();
				const currentHours = now.getHours();
				const currentMinutes = now.getMinutes();
				const currentTimeInMinutes = currentHours * 60 + currentMinutes;

				// 获取上班时间段
				const [workStart, workEnd] = this.workday.split(' - ').map(time => {
					const [hours, minutes] = time.split(':').map(Number);
					return hours * 60 + minutes; // 转换为分钟
				});

				// 获取下班时间段
				const [closingStart, closingEnd] = this.closingday.split(' - ').map(time => {
					const [hours, minutes] = time.split(':').map(Number);
					return hours * 60 + minutes; // 转换为分钟
				});

				console.log('当前时间:', currentTimeInMinutes);
				console.log('上班时间段:', workStart, workEnd);
				console.log('下班时间段:', closingStart, closingEnd);

				// 判断是否在上班时间段
				this.isInWorkTime = (currentTimeInMinutes >= workStart && currentTimeInMinutes < workEnd) || (
					currentTimeInMinutes < workEnd && workStart > workEnd);

				// 判断是否在下班时间段
				this.isInClosingTime = (currentTimeInMinutes >= closingStart && currentTimeInMinutes < closingEnd) || (
					currentTimeInMinutes < closingEnd && closingStart > closingEnd);
				if (!this.isInWorkTime && !this.isInClosingTime) {
					uni.showToast({
						title: '打卡时间未到',
						icon: 'none'
					});
				}
				console.log('下班时间段:', this.isInWorkTime, this.isWorkTime);
				if (this.isInWorkTime && this.isWorkTime === 1) {
					uni.showToast({
						title: '不可重复打卡',
						icon: 'none'
					});
					return; // 直接返回，不再执行后续代码
				}

				if (this.isInClosingTime && this.isClosingTime === 1) {
					uni.showToast({
						title: '不可重复打卡',
						icon: 'none'
					});
					return; // 直接返回，不再执行后续代码
				}
				this.punch()
				console.log('是否在上班时间内:', this.isInWorkTime);
				console.log('是否在下班时间内:', this.isInClosingTime);
			},
			punch() {
				console.log(1)
				let sf = uni.getStorageSync('staffInfo');
				let date = getCurrentDateInfo();
				//打卡类型
				let i = 0
				if (this.isInWorkTime) {
					i = 1
				}
				if (this.isInClosingTime) {
					i = 2
				}
				addpunch({
					"uid": sf.id,
					"year": `${date.year}年${date.month}月${date.day}日`,
					"minute": this.time,
					"type": i,
					"status": 0
				}).then((req) => {
					console.log(req)
					if (req.data.code === 200) {
						uni.setStorageSync('type', 1);
						uni.navigateTo({
							url: "/pages/staff/attendance/attendance-success/attendance-success"
						})
					} else {
						uni.showToast({
							title: req.data.msg,
							icon: 'error'
						});
					}
				})
			},
			showpunch() {
				let sf = uni.getStorageSync('staffInfo');
				let date = getCurrentDateInfo();
				querypunch({
					"uid": sf.id,
					"year": `${date.year}年${date.month}月${date.day}日`,
				}).then((res) => {
					res.data.data.forEach((i) => {
						if (i.type === '1') {
							this.isWorkTime =1
						} else {
							this.isClosingTime =1
						}
					})
				})
			}
		}
	};
</script>

<style>
	.punched {
		color: #dddddd;
		/* 文字颜色 */
		padding: 0px 5px;
		/* 内边距 */
		border: 2px solid #e1e1e1;
		/* 边框线 */
		border-radius: 8px;
		/* 边框圆角 */
		cursor: pointer;
		/* 鼠标悬停时的手型指针 */
		text-align: center;
		/* 文字居中 */
	}

	.not-punched {
		color: #ff5500;
		/* 文字颜色 */
		border: 2px solid #ff5500;
		/* 背景颜色 */
		padding: 0px 5px;
		/* 内边距 */
		border-radius: 8px;
		/* 边框圆角 */
		text-align: center;
		/* 文字居中 */
	}

	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 50vh;
		background-color: #f7f7f7;
		padding: 0 10px;
		position: relative;
		/* 确保页面内容在导航栏之下 */
	}

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		/* 确保导航栏在最上层 */
	}

	.content {
		padding-top: 100rpx;
		/* 为导航栏腾出空间 */
	}



	/* 头部样式 */
	.headView {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 80px;
	}

	/* 头像样式 */
	.headImageView {
		position: relative;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		overflow: hidden;
		border: 5px solid #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	}

	.headImage {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 标题和内容文本样式 */
	.titleText {
		margin-top: 20px;
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.contentText {
		margin-top: 10px;
		font-size: 16px;
		color: #666;
		max-width: 300px;
		text-align: center;
	}

	/* 按钮样式 */
	.authBtn {
		margin-top: 30px;
		padding: 10px 0;
		font-size: 18px;
		background-color: #007aff;
		border: none;
		border-radius: 5px;
		color: #fff;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.authBtn:active {
		background-color: #0052cc;
	}

	/* 输入框样式 */
	.input {
		width: 100%;
		margin-top: 15px;
		padding: 12px;
		font-size: 16px;
		border: 1px solid #ddd;
		border-radius: 5px;
		box-sizing: border-box;
		background-color: #fff;
		/* 确保输入框背景色不是透明 */
		pointer-events: auto;
		/* 确保没有被设置为none */
	}

	.input::placeholder {
		color: #999;
	}

	/* 打卡日志样式 */
	.punch-in-log {
		display: flex;
		justify-content: space-between;
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.section {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mark-time {
		width: 72rpx;
		height: 72rpx;
		margin-bottom: 20px;
	}

	.desc {
		text-align: center;
		color: #333;
	}

	.top {
		font-size: 18px;
		font-weight: bold;
	}

	.middle {
		font-size: 16px;
		color: #666;
	}

	.bottom {
		font-size: 14px;
		color: #999;
	}

	.highlight {
		color: #ff4000;
	}

	.divider {
		width: 2px;
		height: 120px;
		background-color: #eee;
		margin: 0 20px;
	}

	/* 打卡按钮样式 */
	.punch-in {
		margin-top: 30px;
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.btn-punch-in {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		padding: 20px;
		border-radius: 50%;
		background-image: linear-gradient(-6.814deg, #02d0ff 0%, #37a3fe 100%);
		box-shadow: 1.2rpx 6.9rpx 4rpx 0rpx rgba(0, 0, 0, 0.25);
		width: 200rpx;
		height: 200rpx;
	}

	.punch-in {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		padding: 46rpx 0 50rpx;
		/* 根据需要调整内边距 */
		width: 100%;
		/* 设置宽度为100%，占据整个屏幕宽度 */
	}

	.btn-title {
		font-size: 15px;
		color: #fff;
		margin-bottom: 10px;
	}

	.btn-time {
		font-size: 16px;
		color: #9be9ff;
	}

	.tips {
		margin-top: 20px;
		font-size: 14px;
		color: #666;
	}

	/* 底部导航栏样式 */
	.uv-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #eee;
		z-index: 10;
	}

	.uv-tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.icon {
		width: 36rpx;
		height: 36rpx;
	}

	/* 响应式设计 */
	@media screen and (max-width: 375px) {
		.punch-in-log {
			padding: 15px;
		}

		.section .desc .top {
			font-size: 16px;
		}

		.section .desc .middle {
			font-size: 14px;
		}

		.section .desc .bottom {
			font-size: 12px;
		}
	}
</style>